<template>
  <div>
    <!-- C端月度指标查询-->
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" @onCollapse="collapseHandle" :labelWidth="110" @resetChange="resetChange"></TopFilter>

    <Spin :spinning="exportLoading" tip="Loading...">
      <FilterTables
        ref="table"
        columnsRef="wkcOmMonthlyTargetQueryC"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'records'"
        :onColumnsChange="(columns) => (this.columns = columns)"
        :isSelectColumn="false"
      >
      </FilterTables>
    </Spin>
  </div>
</template>
<script>
import moment from 'moment';

import { queryList, getSeriesList, getModelList } from '@/api/omSale/salesPlan/MonthTargetQuery';
import { dictionary } from '@/utils/dictMixin';
import { region } from '@/api/cms-common/region';
import { getSaleAreaInfo } from '@/api/cms-common/dealerdata/index';
import { dealerCommon } from '@/api/cms-api/origin/commonDealerType'; //渠道类型工具类

export default {
  name: 'MonthPlanQuery',
  mixins: [dictionary, region, dealerCommon],
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryList,
      fetchParams: {
        isDealer: 10041002,
        targetDate: moment().subtract(-1, 'months').format('YYYY-MM'),
      },
      formData: {},
      exportLoading: false,
      isDealer: false,
      areaList: [],
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  created() {
    // this.getAreaData();
    //初始化省份信息
    // this.initProvince();
    this.getSeriesData();
  },
  methods: {
    resetChange(params) {
      this.topFilterList.find((item) => item.fieldName === 'modelId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'modelId').itemList = [];
      this.fetchParams = Object.assign({}, this.fetchParams);
    },
    async getAreaData() {
      const res = await getSaleAreaInfo(15061013);
      if (res.resultCode === 200) {
        this.areaList = res.data;
        res.data.map((x) => {
          this.topFilterList.find((item) => item.fieldName == 'areaId').itemList.push({ text: x.orgName, value: x.id });
        });
      }
    },
    areaName(value) {
      for (let i in this.areaList) {
        if (this.areaList[i].id === value) {
          return this.areaList[i].orgName;
        }
      }
    },
    //初始化所在省份
    async initProvince() {
      let pl = this.createRegionList();
      this.topFilterList.find((item) => item.fieldName == 'provinceId').itemList = pl;
    },
    //初始化所在市数据
    async initCity(provinceId) {
      //清空市
      this.topFilterList.find((item) => item.fieldName == 'cityId').initialValue = '';
      if (!provinceId || provinceId == null || typeof provinceId == 'undefined') {
        return;
      }
      //取省数据
      let rd = this.getRegionData();
      this.cityData = rd[provinceId].children;
      let cl = this.createSubRegionList(this.cityData);
      this.topFilterList.find((item) => item.fieldName == 'cityId').itemList = cl;
    },
    //初始化车型
    async initModel(seriesId) {
      this.topFilterList.find((item) => item.fieldName == 'modelId').itemList = [];
      this.topFilterList.find((item) => item.fieldName == 'modelId').initialValue = '';
      if (!seriesId) {
        return;
      }
      const res = await getModelList({ seriesId: seriesId });
      if (res.resultCode === 200) {
        res.data.map((x) => {
          this.topFilterList.find((item) => item.fieldName == 'modelId').itemList.push({ text: x.modelName, value: x.modelId });
        });
      }
    },
    async getSeriesData() {
      const res = await getSeriesList();
      if (res.resultCode === 200) {
        res.data.map((x) => {
          this.topFilterList.find((item) => item.fieldName == 'seriesId').itemList.push({ text: x.seriesName, value: x.seriesId });
        });
      }
    },
    emitCloseHandler(val, data) {
      this.isDealer = val;
      if (data) {
        let dealerCodes = [];
        let dealerNames = [];
        data.map((x) => {
          dealerCodes.push(x.dealerCode);
          dealerNames.push(x.dealerName);
        });
        this.topFilterList.find((x) => x.fieldName == 'dealerCodes').initialValue = dealerCodes.toString();
      }
    },
    changeHandle(params) {
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    // getSeriesName(val){
    //   let list=this.topFilterList.find(item => item.fieldName == 'seriesId').itemList;
    //   for(var i in list){
    //     if (list[i].value===val){
    //       return list[i].text;
    //     }}
    //   },
    createdFrom() {
      return [
        {
          type: 'DATE',
          label: '指标月份',
          fieldName: 'targetDate',
          initialValue: moment().subtract(-1, 'months').format('YYYY-MM'),
          dateType: 'month',
          clearable: true,
        },
        {
          type: 'SELECT',
          label: '状态',
          fieldName: 'status',
          placeholder: '请选择',
          itemList: this.createDictList('2132'),
        },
        // {
        //   type: 'SELECT',
        //   label: '类型',
        //   fieldName: 'targetType',
        //   placeholder: '请选择',
        //   itemList: this.createDictList('2403'),
        // },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'seriesId',
          placeholder: '请选择',
          itemList: [],
          change: (value) => {
            this.initModel(value);
          },
        },
        {
          type: 'SELECT',
          label: '车型',
          fieldName: 'modelId',
          placeholder: '请选择',
          itemList: [],
        },
        // {
        //   type: 'SELECT',
        //   label: 'C端战区',
        //   fieldName: 'areaId',
        //   placeholder: '请选择',
        //   itemList: [],
        // },
        // {
        //   type: 'SELECT',
        //   label: '省份',
        //   fieldName: 'provinceId',
        //   placeholder: '请选择',
        //   itemList: [],
        //   change: (value) => {
        //     this.initCity(value);
        //   },
        // },
        // {
        //   type: 'SELECT',
        //   label: '城市',
        //   fieldName: 'cityId',
        //   placeholder: '请选择',
        //   itemList: [],
        //   // change: (value) => {
        //   //   this.initTown(value)
        //   // },
        // },
        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'dealerCode',
          placeholder: '请输入',
        },
        {
          type: 'INPUT',
          label: '经销商名称',
          fieldName: 'dealerName',
          placeholder: '请输入',
        },
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '状态',
          dataIndex: 'status',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: (props) => {
            //编码转汉字
            return <span>{this.createDictText(props.row.status, '2132')}</span>;
          },
        },
        // {
        //   title: 'C端战区',
        //   dataIndex: 'areaId',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        //   render: (props) => {
        //     return <span>{this.areaName(props.row.areaId)}</span>;
        //   },
        // },
        // {
        //   title: '省份',
        //   dataIndex: 'provinceName',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        // },
        // {
        //   title: '城市',
        //   dataIndex: 'cityName',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        // },
        {
          title: '经销商代码',
          dataIndex: 'dealerCode',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '经销商名称',
          dataIndex: 'dealerName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        // {
        //   title: '类型',
        //   dataIndex: 'targetType',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        //   render: (props) => {
        //     //编码转汉字
        //     return <span>{this.createDictText(props.row.targetType, '2403')}</span>;
        //   },
        // },
        {
          title: '车系名称',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input',
          // render: props => {    //编码转汉字
          //   return <span>{this.getSeriesName(props.row.seriesId)}</span>;
          // }
        },
        {
          title: '车型名称',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        // {
        //   title: '物料编码',
        //   dataIndex: 'productCode',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        // },
        {
          title: '指标月份',
          dataIndex: 'targetDate',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '任务数量（结算）',
          dataIndex: 'targetNum',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '任务数量（终端）',
          dataIndex: 'targetRetailNum',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '下发日期',
          dataIndex: 'assignDate',
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '下发人',
          dataIndex: 'assignPersonName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
      ];
    },
  },
};
</script>
